<template>
  <div class="test-table" ref="tableContainer">
    
    <div class="table-header-wrapper">
      <table ref="headerTable" class="header-table">
        <colgroup>
          <col v-for="header in headers" :key="header.key" :style="{ width: header.width + 'px' }" />
        </colgroup>
        <thead>
          <tr>
            <th v-for="(header, index) in headers" :key="header.key" class="resizable-header" :ref="el => { if (el) headerRefs[index] = el; }">
              <div class="header-content">{{ header.label }}</div>
              <div 
                v-if="index < headers.length - 1"
                class="resize-handle" 
                @mousedown="startResize($event, index)"
              ></div>
            </th>
          </tr>
        </thead>
      </table>
    </div>

    <div class="filter-row-wrapper">
      <table class="filter-table">
        <colgroup>
          <col v-for="header in headers" :key="header.key" :style="{ width: header.width + 'px' }" />
        </colgroup>
        <tbody>
          <tr>
            <td v-for="(header, index) in headers" :key="header.key">
              <div class="filter-container" v-if="header.type === 'select' && header.filter && header.filter.options">
                <select 
                  :value="filterValues[header.key]" 
                  @change="handleFilterChange(header.key, $event.target.value)"
                  class="filter-select"
                >
                  <option value="">全部</option>
                  <option v-for="option in header.filter.options" :key="option.value" :value="option.value">
                    {{ option.label }}
                  </option>
                </select>
              </div>
              
              <div class="filter-container filter-with-operators" v-else-if="header.type === 'operators'">
                <select 
                  :value="operatorValues[header.key]" 
                  @change="handleOperatorChange(header.key, $event.target.value)"
                  class="operator-select"
                >
                  <option v-for="operator in operatorOptions" :key="operator.value" :value="operator.value">
                    {{ operator.label }}
                  </option>
                </select>
                <input 
                  :value="filterValues[header.key]" 
                  @input="handleFilterChange(header.key, $event.target.value)"
                  class="operators-filter-input"
                  placeholder="请输入筛选条件"
                />
              </div>
              
              <div class="filter-container" v-else-if="header.type === 'input'">
                <input 
                  :value="filterValues[header.key]" 
                  @input="handleFilterChange(header.key, $event.target.value)"
                  class="input-filter-input"
                  :placeholder="header.label"
                />
              </div>
            
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="table-body-wrapper" ref="tableBodyWrapper" @scroll="onTableScroll">
      <table ref="bodyTable" class="body-table">
        <colgroup>
          <col v-for="header in headers" :key="header.key" :style="{ width: header.width + 'px' }" />
        </colgroup>
        <tbody>
          <tr v-for="(row, rowIndex) in filteredRows" :key="rowIndex">
            <td v-for="(header, cellIndex) in headers" :key="header.key">{{ row[header.key] }}</td>
          </tr>
          <tr v-if="filteredRows.length === 0">
            <td :colspan="headers.length" class="no-data-cell">
              <div class="no-data">暂无数据</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</template>

<script>
export default {
  name: 'filterTable',
  data() {
    return {
      headers: [
        { 
          label: '姓名', 
          key: 'name', 
          type: 'input',
          width: 120,
          filter: {
            options: [
              { value: '张三', label: '张三' },
              { value: '李四', label: '李四' },
              { value: '王五', label: '王五' },
              { value: '赵六', label: '赵六' },
              { value: '钱七', label: '钱七' },
              { value: '孙八', label: '孙八' },
              { value: '周九', label: '周九' },
              { value: '吴十', label: '吴十' }
            ]
          }
        },
        { 
          label: '年龄', 
          key: 'age', 
          type: 'operators',
          width: 120
        },
        { 
          label: '城市', 
          key: 'city',
          width: 120,
          type: 'select',
          filter: {
            options: [
              { value: '北京', label: '北京' },
              { value: '上海', label: '上海' },
              { value: '广州', label: '广州' },
              { value: '深圳', label: '深圳' },
              { value: '杭州', label: '杭州' },
              { value: '成都', label: '成都' },
              { value: '武汉', label: '武汉' },
              { value: '西安', label: '西安' }
            ]
          }
        },
        { 
          label: '职业', 
          key: 'job',
          width: 120,
          type: 'select',
          filter: {
            options: [
              { value: '工程师', label: '工程师' },
              { value: '设计师', label: '设计师' },
              { value: '产品经理', label: '产品经理' },
              { value: '运营', label: '运营' },
              { value: '数据分析师', label: '数据分析师' },
              { value: '测试工程师', label: '测试工程师' },
              { value: 'UI设计师', label: 'UI设计师' },
              { value: '前端工程师', label: '前端工程师' }
            ]
          }
        },
        { 
          label: '学历', 
          key: 'education',
          width: 120,
          type: 'select',
          filter: {
            options: [
              { value: '本科', label: '本科' },
              { value: '硕士', label: '硕士' }
            ]
          }
        },
        { 
          label: '工作经验', 
          key: 'experience',
          width: 120,        
          type: 'operators',
        },
        { 
          label: '薪资', 
          key: 'salary',
          width: 120,
          type: 'operators',
        },
        { 
          label: '部门', 
          key: 'department',
          width: 120,
          type: 'select',
          filter: {
            options: [
              { value: '技术部', label: '技术部' },
              { value: '设计部', label: '设计部' },
              { value: '产品部', label: '产品部' },
              { value: '运营部', label: '运营部' },
              { value: '数据部', label: '数据部' }
            ]
          }
        },
        { 
          label: '入职日期', 
          key: 'hireDate',
          width: 120
        },
        { 
          label: '状态', 
          key: 'status',
          width: 120,
          type: 'select',
          filter: {
            options: [
              { value: '在职', label: '在职' },
              { value: '离职', label: '离职' }
            ]
          }
        }
      ],
      filterValues: {},
      operatorValues: {},
      operatorOptions: [
        { value: 'equal', label: '=' },
        { value: 'greater', label: '>' },
        { value: 'less', label: '<' },
      ],
      rows: [
        { name: '张三', age: '25', city: '北京', job: '工程师', education: '本科', experience: '3年', salary: '15K', department: '技术部', hireDate: '2020-01-15', status: '在职' },
        { name: '李四', age: '30', city: '上海', job: '设计师', education: '硕士', experience: '5年', salary: '20K', department: '设计部', hireDate: '2019-03-22', status: '在职' },
        { name: '王五', age: '28', city: '广州', job: '产品经理', education: '本科', experience: '4年', salary: '18K', department: '产品部', hireDate: '2020-07-10', status: '在职' },
        { name: '赵六', age: '32', city: '深圳', job: '运营', education: '本科', experience: '6年', salary: '16K', department: '运营部', hireDate: '2018-11-05', status: '在职' },
        { name: '钱七', age: '27', city: '杭州', job: '数据分析师', education: '硕士', experience: '2年', salary: '14K', department: '数据部', hireDate: '2021-02-18', status: '在职' },
        { name: '孙八', age: '29', city: '成都', job: '测试工程师', education: '本科', experience: '4年', salary: '15K', department: '技术部', hireDate: '2020-05-30', status: '在职' },
        { name: '周九', age: '31', city: '武汉', job: 'UI设计师', education: '硕士', experience: '6年', salary: '19K', department: '设计部', hireDate: '2018-09-12', status: '在职' },
        { name: '吴十', age: '26', city: '西安', job: '前端工程师', education: '本科', experience: '2年', salary: '13K', department: '技术部', hireDate: '2021-08-25', status: '在职' },
        { name: '张三', age: '25', city: '北京', job: '工程师', education: '本科', experience: '3年', salary: '15K', department: '技术部', hireDate: '2020-01-15', status: '在职' },
        { name: '李四', age: '30', city: '上海', job: '设计师', education: '硕士', experience: '5年', salary: '20K', department: '设计部', hireDate: '2019-03-22', status: '在职' },
        { name: '王五', age: '28', city: '广州', job: '产品经理', education: '本科', experience: '4年', salary: '18K', department: '产品部', hireDate: '2020-07-10', status: '在职' },
        { name: '赵六', age: '32', city: '深圳', job: '运营', education: '本科', experience: '6年', salary: '16K', department: '运营部', hireDate: '2018-11-05', status: '在职' },
        { name: '钱七', age: '27', city: '杭州', job: '数据分析师', education: '硕士', experience: '2年', salary: '14K', department: '数据部', hireDate: '2021-02-18', status: '在职' },
        { name: '孙八', age: '29', city: '成都', job: '测试工程师', education: '本科', experience: '4年', salary: '15K', department: '技术部', hireDate: '2020-05-30', status: '在职' },
        { name: '周九', age: '31', city: '武汉', job: 'UI设计师', education: '硕士', experience: '6年', salary: '19K', department: '设计部', hireDate: '2018-09-12', status: '在职' },
        { name: '吴十', age: '26', city: '西安', job: '前端工程师', education: '本科', experience: '2年', salary: '13K', department: '技术部', hireDate: '2021-08-25', status: '在职' }
      ],
      headerRefs: [],
      resizing: false,
      startX: 0,
      startWidthLeft: 0,
      startWidthRight: 0,
      leftIndex: -1, 
      rightIndex: -1
    };
  },
  mounted() {
    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);
  },
  beforeUnmount() {
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  },
  computed: {
    filteredRows() {
      return this.rows.filter(row => {
        return this.headers.every(header => {
          const filterValue = this.filterValues[header.key];
          if (!filterValue) return true;
          
          if (header.type === 'select' && header.filter && header.filter.options) {
            return row[header.key] === filterValue;
          } else if (header.type === 'operators') {
            const operator = this.operatorValues[header.key] || 'equal';
            const cellValue = row[header.key];
            
            const cellNum = parseFloat(cellValue);
            const filterNum = parseFloat(filterValue);
            
            if (isNaN(cellNum) || isNaN(filterNum)) return false;
            
            switch (operator) {
              case 'equal': return cellNum === filterNum;
              case 'notEqual': return cellNum !== filterNum;
              case 'greater': return cellNum > filterNum;
              case 'less': return cellNum < filterNum;
              default: return cellValue.includes(filterValue);
            }
          } else if (header.type === 'input' || header.filter ) {
            return !filterValue || row[header.key].includes(filterValue);
          } else {
            return !filterValue || row[header.key].includes(filterValue);
          }
        });
      });
    }
  },
  methods: {
      
      handleFilterChange(key, value) {
        if (!this.filterValues) {
          this.filterValues = {};
        }
        this.filterValues[key] = value;
      },
      
      handleOperatorChange(key, value) {
        if (!this.operatorValues) {
          this.operatorValues = {};
        }
        this.operatorValues[key] = value;
      },
      
      startResize(event, index) {
      this.resizing = true;
      this.leftIndex = index;
      this.rightIndex = index + 1;
      this.startX = event.clientX;
      this.startWidthLeft = this.headers[this.leftIndex].width;
      this.startWidthRight = this.headers[this.rightIndex].width;
      
      event.preventDefault();
    },
    
    onMouseMove(event) {
      if (!this.resizing) return;
      
      document.body.classList.add('resizing');
      
      const diff = event.clientX - this.startX;
      
      const totalWidth = this.startWidthLeft + this.startWidthRight;
      let newWidthLeft = this.startWidthLeft + diff;
      let newWidthRight = this.startWidthRight - diff;
      
      if (newWidthLeft < 50) {
        newWidthLeft = 50;
        newWidthRight = totalWidth - 50;
      } else if (newWidthRight < 50) {
        newWidthRight = 50;
        newWidthLeft = totalWidth - 50;
      }
      
      this.headers[this.leftIndex].width = newWidthLeft;
      this.headers[this.rightIndex].width = newWidthRight;
    },
    
    onMouseUp() {
      if (this.resizing) {
        this.resizing = false;
        this.leftIndex = -1;
        this.rightIndex = -1;
        
        document.body.classList.remove('resizing');
      }
    },
    
    onTableScroll(event) {
      if (this.$refs.headerTable) {
        this.$refs.headerTable.style.transform = `translateX(${-event.target.scrollLeft}px)`;
      }
      
      const filterRow = this.$el.querySelector('.filter-table');
      if (filterRow) {
        filterRow.style.transform = `translateX(${-event.target.scrollLeft}px)`;
      }
    }
  }
};
</script>

<style scoped>
.test-table {
  background: #333;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.table-header-wrapper {
  overflow: hidden;
  flex-shrink: 0;
}

.header-table {
  width: 100%;
  border-collapse: collapse;
  color: #e0e0e0;
  table-layout: fixed;
}

.filter-row-wrapper {
  overflow: hidden;
  flex-shrink: 0;
  background-color: #3a3a3a;
}

.filter-table {
  width: 100%;
  border-collapse: collapse;
  color: #e0e0e0;
  table-layout: fixed;
}

.table-body-wrapper {
  overflow-x: auto;
  overflow-y: scroll; 
  flex-grow: 1;
  margin-top: -1px; 
  max-height: 400px; 
  
  &::-webkit-scrollbar {
    width: 0px; 
    height: 12px;
    background-color: #2d2d2d;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background-color: #2d2d2d;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 6px;
    border: 2px solid #2d2d2d;
    
    &:hover {
      background-color: #777;
    }
  }

  &::-webkit-scrollbar-corner {
    background-color: #2d2d2d;
  }
}

.no-data-cell {
  text-align: center;
  padding: 0;
  background-color: #333;
}

.no-data {
  text-align: center;
  padding: 40px 0;
  color: #888;
  font-size: 16px;
  background-color: #333;
}

.body-table {
  width: 100%;
  border-collapse: collapse;
  color: #e0e0e0;
  table-layout: fixed;
}

th,
td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

th:last-child,
td:last-child {
  border-right: none;
}

th {
  color: white;
  font-weight: bold;
  position: relative;
  user-select: none;
  border-right: 1px solid #444;
}

tr:hover {
  background-color: #3a3a3a;
}

.resizable-header {
  padding: 0;
}

.header-content {
  padding: 12px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;
}

body.resizing {
  cursor: col-resize;
  user-select: none;
}

.filter-container {
  display: flex;
  gap: 2px;
  background-color: #555;
  border: 1px solid #666;
  border-radius: 4px;
  padding: 2px;
}

.filter-container:hover {
  background-color: #666;
  border-color: #777;
}

.filter-container:focus-within {
  border-color: #888;
}

.filter-select,
.operator-select,
.operators-filter-input,
.input-filter-input {
  background-color: #555;
  color: white;
  border: none;
  outline: none;
  padding: 4px;
  border-radius: 2px;
}

.filter-select:focus,
.operator-select:focus,
.operators-filter-input:focus,
.input-filter-input:focus {
  background-color: #666;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.filter-select option,
.operator-select option {
  background-color: #555;
  color: white;
  border-radius: 4px;
}

.filter-select {
  width: 100%;
}

.operator-select {
  width: 40px;
}

.operators-filter-input {
  width: 100%;
}

.input-filter-input {
  width: 100%;
}
</style>